<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Neon Admin Panel">
    <meta name="author" content="">
    <title>沐锦 | Home</title>

    <link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="/static/css/entypo.css">
    <link rel="stylesheet" href="/static/css/css.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/neon-core.css">
    <link rel="stylesheet" href="/static/css/neon-theme.css">
    <link rel="stylesheet" href="/static/css/neon-forms.css">
    <link rel="stylesheet" href="/static/css/custom.css">
    <script src="/static/js/jquery-1.11.0.min.js"></script>
</head>
<body class="page-body  page-left-in" data-url="http://neon.dev">

<div class="page-container">
    <!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->
    <div class="sidebar-menu">
        <!-- 头部信息: logo -->
        <header class="logo-env">
            <!-- logo -->
            <div class="logo">
                <a href="index.html">
                    <img src="/static/picture/logo@2x.png" width="120" alt="">
                </a>
            </div>

            <!-- logo collapse icon -->
            <div class="sidebar-collapse">
                <a href="#" class="sidebar-collapse-icon with-animation">
                    <!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition -->
                    <i class="entypo-menu"></i>
                </a>
            </div>

            <!-- open/close menu icon (do not remove if you want to enable menu on mobile devices) -->
            <div class="sidebar-mobile-menu visible-xs">
                <a href="#" class="with-animation"><!-- add class "with-animation" to support animation -->
                    <i class="entypo-menu"></i>
                </a>
            </div>
        </header>

        <!-- 用户信息: 头像、用户名 -->
        <div class="sidebar-user-info">
            <div class="sui-normal">
                <a href="#" class="user-link">
                    <img src="/media/{{ userInfo.avatar }}" alt="" class="img-circle" style="width: 95%;">
                    <span style="text-align: center; padding-top: 209px;">欢迎回来,</span>
                    <strong style="text-align: center; padding-top: 5px;">{{ userInfo.username }}</strong>
                </a>
            </div>
        </div>

        <!-- 导航菜单信息 -->
        <ul id="main-menu" class="">
            <li class="opened active">
                <a href="#">
                    <i class="entypo-gauge"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-user"></i>
                    <span>个人中心</span>
                </a>
                <ul>
                    <li>
                        <a href="/app/selfInfo/">
                            <span>个人信息</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/changePassword/">
                            <span>修改密码</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-layout"></i>
                    <span>数据统计</span>
                </a>
                <ul>
                    <li>
                        <a href="/app/tableData/">
                            <span>数据总览</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/historyTableData/">
                            <span>历史查阅</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-chart-bar"></i>
                    <span>可视化图表</span>
                </a>
                <ul>
                    <li>
                        <a href="/app/salary/">
                            <i class="entypo-light-down"></i>
                            <span>薪资情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/company/">
                            <i class="entypo-feather"></i>
                            <span>企业情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/companyTags/">
                            <i class="entypo-lamp"></i>
                            <span>福利词云</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/educational/">
                            <i class="entypo-graduation-cap"></i>
                            <span>学历分布</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/companyStatus/">
                            <i class="entypo-network"></i>
                            <span>企业融资</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/address/">
                            <i class="entypo-rocket"></i>
                            <span>城市类型</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
    <div class="main-content">
        <!-- 顶部信息: 退出按钮 -->
        <div class="row" style="display: flex">
            <!-- Raw Links -->
            <div style="margin-left: auto" class="col-md-6 col-sm-4 clearfix hidden-xs">
                <ul class="list-inline links-list pull-right">
                    <li>
                        <a href="/app/logout/">
                            退出登录 <i class="entypo-logout right"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <hr>

        <!-- 日期时间信息 -->
        <div class="row">
            <div class="col-sm-12">
                <div class="well">
                    <h1>{{ dateInfo.month }} {{ dateInfo.day }}, {{ dateInfo.year }}</h1>
                    <h3>Welcome to the site <strong>BOSS直聘可视化分析</strong></h3>
                </div>
            </div>
        </div>


        <div class="row">
            <!-- 左侧: 统计数据 -->
            <div class="col-sm-9">
                <div class="row">
                    <!-- 用户创建时间饼状图 -->
                    {#                    <div class="col-sm-6">#}
                    {#                        <div class="panel panel-default">#}
                    {#                            <div class="panel-heading">#}
                    {#                                <div class="panel-title">用户创建时间-饼状图</div>#}
                    {#                                <div class="panel-options">#}
                    {#                                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>#}
                    {#                                    <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>#}
                    {#                                </div>#}
                    {#                            </div>#}
                    {#                            <div class="panel-body" style="text-align: center">#}
                    {#                                <div id="mainOne" style="width: 100%; height: 300px;"></div>#}
                    {#                            </div>#}
                    {#                        </div>#}
                    {#                    </div>#}

                    <!-- 最新用户信息 -->
                    <div class="col-sm-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title">最新用户信息</div>
                                <div class="panel-options">
                                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                                    <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                                </div>
                            </div>
                            <table class="table table-bordered table-responsive">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>用户名</th>
                                    <th>密码(MD5)</th>
                                    <th>创建时间</th>
                                </tr>
                                </thead>

                                <tbody>
                                {% for user in users %}
                                    <tr>
                                        <td>{{ user.num }}</td>
                                        <td>{{ user.name }}</td>
                                        <td>{{ user.password }}</td>
                                        <td class="text-center">{{ user.createTime | date:"Y-m-d" }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 数据获取时间柱状图 -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>数据获取时间柱状图</h4>
                        </div>

                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <div class="panel-body no-padding">
{#                        <div id="mainTwo" style="width: 100%; height: 300px;"></div>#}
                        <div id="mainThree" style="width: 100%; height: 300px;"></div>
                    </div>
                </div>
            </div>

            <!-- 右侧: 浮标统计数据 -->
            <div class="col-sm-3">
                <div class="tile-stats tile-green">
                    <div class="icon"><i class="entypo-chat"></i></div>
                    <div class="num" data-start="0" data-end="{{ pageData.jobTotal }}" data-postfix=""
                         data-duration="1400" data-delay="0">{{ pageData.jobTotal }}</div>
                    <h3>数据统计总量</h3>
                </div>

                <div class="tile-stats tile-red">
                    <div class="icon"><i class="entypo-user"></i></div>
                    <div class="num" data-start="0" data-end="{{ pageData.userTotal }}" data-postfix=""
                         data-duration="1400" data-delay="0">{{ pageData.userTotal }}</div>
                    <h3>用户数量统计</h3>
                </div>

                <div class="tile-stats tile-aqua">
                    <div class="icon"><i class="entypo-graduation-cap"></i></div>
                    <div class="num" style="font-size: 30px;">{{ pageData.highestEducational }}</div>
                    <h3>行业最高学历</h3>
                </div>

                <div class="tile-stats tile-blue">
                    <div class="icon"><i class="entypo-rocket"></i></div>
                    <div class="num" style="font-size: 30px;">{{ pageData.highestSalary }}K</div>
                    <h3>行业最高薪资</h3>
                </div>

                <div class="tile-stats tile-cyan">
                    <div class="icon"><i class="entypo-trophy"></i></div>
                    <div class="num" data-start="0" data-end="{{ pageData.highestSalaryMonth }}" data-postfix=""
                         data-duration="1400" data-delay="0">{{ pageData.highestSalaryMonth }}</div>
                    <h3>最高年底多薪</h3>
                </div>

                <div class="tile-stats tile-orange">
                    <div class="icon"><i class="entypo-location"></i></div>
                    <div class="num" style="font-size: 20px;">{{ pageData.hotCity }}</div>
                    <h3>优势城市</h3>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">数据表格</div>
                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body" style="padding-left: 0; padding-right: 0;">
                        <table class="table table-bordered responsive">
                            <thead>
                            <tr role="row">
                                <th class="center">编号</th>
                                <th>职位名称</th>
                                <th>工作地点</th>
                                <th>职位类型</th>
                                <th>学历要求</th>
                                <th>工作经验</th>
                                <th>工作标签</th>
                                <th>最高薪资</th>
                                <th>年底多薪</th>
                                <th>是否实习</th>
                                <th>公司名称</th>
                                <th>公司福利</th>
                                <th>公司Logo</th>
                                <th>融资阶段</th>
                                <th>公司人数</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody role="alert" aria-live="polite" aria-relevant="all">
                            {% for j in jobData %}
                                <tr class="gradeA odd">
                                    <td class="sorting_1"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">{{ j.num }}</td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center; color: #000;">
                                        <a href="https://www.zhipin.com/web/geek/job?query={{ j.title }}">{{ j.title }}</a>
                                    </td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">{{ j.address }}</td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">{{ j.type }}</td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">{{ j.educational }}</td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">{{ j.workExperience }}</td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle;">{{ j.workTag }}</td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">
                                        {% if j.pratice == 0 %}
                                            {{ j.salary }}/月
                                        {% else %}
                                            {{ j.salary }}/天
                                        {% endif %}
                                    </td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">
                                        {% if j.salaryMonth == '0' %}
                                            -
                                        {% else %}
                                            {{ j.salaryMonth }}薪
                                        {% endif %}
                                    </td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">
                                        {% if j.pratice == 0 %}
                                            正常岗位
                                        {% else %}
                                            实习岗位
                                        {% endif %}
                                    </td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">{{ j.companyTitle }}</td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle;">{{ j.companyTags }}</td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;"><img
                                            src="{{ j.companyAvatar }}" alt=""></td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">{{ j.companyStatus }}</td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">{{ j.companyPeople }}人
                                    </td>
                                    <td class="center"
                                        style="display: table-cell; vertical-align: middle; text-align: center;">
                                        <a href="{{ j.detailUrl }}" type="button" class="btn btn-info btn-sm">岗位详情</a>
                                        <a href="{{ j.companyUrl }}" type="button" class="btn btn-green btn-sm"
                                           style="margin: 3px;">公司详情</a>
                                        <a href="/app/addHistory/{{ j.id }}" type="button"
                                           class="btn btn-danger btn-sm">添加历史</a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer class="main" style="display: block; text-align: center;">
            Copyright &copy; 2021.Company name All rights reserved.<a target="_blank"
                                                                      href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>

        </footer>
    </div>


    <div id="chat" class="fixed" data-current-user="Art Ramadani" data-order-by-status="1" data-max-chat-history="25">

        <div class="chat-inner">


            <h2 class="chat-header">
                <a href="#" class="chat-close" data-animate="1"><i class="entypo-cancel"></i></a>

                <i class="entypo-users"></i>
                Chat
                <span class="badge badge-success is-hidden">0</span>
            </h2>


            <div class="chat-group" id="group-1">
                <strong>Favorites</strong>

                <a href="#" id="sample-user-123" data-conversation-history="#sample_history"><span
                        class="user-status is-online"></span> <em>Catherine J. Watkins</em></a>
                <a href="#"><span class="user-status is-online"></span> <em>Nicholas R. Walker</em></a>
                <a href="#"><span class="user-status is-busy"></span> <em>Susan J. Best</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Brandon S. Young</em></a>
                <a href="#"><span class="user-status is-idle"></span> <em>Fernando G. Olson</em></a>
            </div>


            <div class="chat-group" id="group-2">
                <strong>Work</strong>

                <a href="#"><span class="user-status is-offline"></span> <em>Robert J. Garcia</em></a>
                <a href="#" data-conversation-history="#sample_history_2"><span class="user-status is-offline"></span>
                    <em>Daniel A. Pena</em></a>
                <a href="#"><span class="user-status is-busy"></span> <em>Rodrigo E. Lozano</em></a>
            </div>


            <div class="chat-group" id="group-3">
                <strong>Social</strong>

                <a href="#"><span class="user-status is-busy"></span> <em>Velma G. Pearson</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Margaret R. Dedmon</em></a>
                <a href="#"><span class="user-status is-online"></span> <em>Kathleen M. Canales</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Tracy J. Rodriguez</em></a>
            </div>

        </div>

        <!-- conversation template -->
        <div class="chat-conversation">

            <div class="conversation-header">
                <a href="#" class="conversation-close"><i class="entypo-cancel"></i></a>

                <span class="user-status"></span>
                <span class="display-name"></span>
                <small></small>
            </div>

            <ul class="conversation-body">
            </ul>

            <div class="chat-textarea">
                <textarea class="form-control autogrow" placeholder="Type your message"></textarea>
            </div>

        </div>

    </div>


    <!-- Chat Histories -->
    <ul class="chat-history" id="sample_history">
        <li>
            <span class="user">Art Ramadani</span>
            <p>Are you here?</p>
            <span class="time">09:00</span>
        </li>

        <li class="opponent">
            <span class="user">Catherine J. Watkins</span>
            <p>This message is pre-queued.</p>
            <span class="time">09:25</span>
        </li>

        <li class="opponent">
            <span class="user">Catherine J. Watkins</span>
            <p>Whohoo!</p>
            <span class="time">09:26</span>
        </li>

        <li class="opponent unread">
            <span class="user">Catherine J. Watkins</span>
            <p>Do you like it?</p>
            <span class="time">09:27</span>
        </li>
    </ul>


    <!-- Chat Histories -->
    <ul class="chat-history" id="sample_history_2">
        <li class="opponent unread">
            <span class="user">Daniel A. Pena</span>
            <p>I am going out.</p>
            <span class="time">08:21</span>
        </li>

        <li class="opponent unread">
            <span class="user">Daniel A. Pena</span>
            <p>Call me when you see this message.</p>
            <span class="time">08:27</span>
        </li>
    </ul>
</div>

<!-- Sample Modal (Default skin) -->
<div class="modal fade" id="sample-modal-dialog-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Widget Options - Default Modal</h4>
            </div>

            <div class="modal-body">
                <p>Now residence dashwoods she excellent you. Shade being under his bed her. Much read on as draw.
                    Blessing for ignorant exercise any yourself unpacked. Pleasant horrible but confined day end
                    marriage. Eagerness furniture set preserved far recommend. Did even but nor are most gave hope.
                    Secure active living depend son repair day ladies now.</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Sample Modal (Skin inverted) -->
<div class="modal invert fade" id="sample-modal-dialog-2">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Widget Options - Inverted Skin Modal</h4>
            </div>

            <div class="modal-body">
                <p>Now residence dashwoods she excellent you. Shade being under his bed her. Much read on as draw.
                    Blessing for ignorant exercise any yourself unpacked. Pleasant horrible but confined day end
                    marriage. Eagerness furniture set preserved far recommend. Did even but nor are most gave hope.
                    Secure active living depend son repair day ladies now.</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Sample Modal (Skin gray) -->
<div class="modal gray fade" id="sample-modal-dialog-3">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Widget Options - Gray Skin Modal</h4>
            </div>

            <div class="modal-body">
                <p>Now residence dashwoods she excellent you. Shade being under his bed her. Much read on as draw.
                    Blessing for ignorant exercise any yourself unpacked. Pleasant horrible but confined day end
                    marriage. Eagerness furniture set preserved far recommend. Did even but nor are most gave hope.
                    Secure active living depend son repair day ladies now.</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="/static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="/static/css/rickshaw.min.css">

<!-- Bottom Scripts -->
<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/static/js/jquery-jvectormap-europe-merc-en.js"></script>
<script src="/static/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/static/js/jquery.sparkline.min.js"></script>
<script src="/static/js/d3.v3.js"></script>
<script src="/static/js/rickshaw.min.js"></script>
<script src="/static/js/neon-chat.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
<script src="/static/js/echarts.js"></script>


<script>
    var chartDom = document.getElementById('mainOne');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'create-time',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: {{ createTimeData | safe }}
            }
        ]
    };

    option && myChart.setOption(option);
</script>

<script>
    var chartDom = document.getElementById('mainTwo');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '60px',
            right: '40px',
            bottom: '40px'
        },
        legend: {
            data: ['爬取数据量', '数据平均值'],
            right: 10,
            top: 10
        },
        toolbox: {},
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }
        ],
        yAxis: [
            {
                name: '爬取数据量',
                type: 'value'
            }
        ],
        series: [
            {
                name: '爬取数据量',
                type: 'bar',
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ],
                markPoint: {
                    data: [
                        {type: 'max', name: 'Max'},
                        {type: 'min', name: 'Min'}
                    ]
                },
                itemStyle: {
                    color: '#93cc74'
                }
            },
            {
                name: '数据平均值',
                type: 'bar',
                data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ],
                markPoint: {
                    data: [
                        {name: 'Max', value: 182.2, xAxis: 7, yAxis: 183},
                        {name: 'Min', value: 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                itemStyle: {
                    color: '#546fc6'
                }
            }
        ]
    };

    option && myChart.setOption(option);
</script>

<script>
    var chartDom = document.getElementById('mainThree');
    var myChart = echarts.init(chartDom);
    var option;

    const data = [];
    for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200));
    }
    option = {
        xAxis: {
            max: 'dataMax'
        },
        yAxis: {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E'],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 2 // only the largest 3 bars will be displayed
        },
        series: [
            {
                realtimeSort: true,
                name: 'X',
                type: 'bar',
                data: data,
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                }
            }
        ],
        legend: {
            show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
    };

    function run() {
        for (var i = 0; i < data.length; ++i) {
            if (Math.random() > 0.9) {
                data[i] += Math.round(Math.random() * 2000);
            } else {
                data[i] += Math.round(Math.random() * 200);
            }
        }
        myChart.setOption({
            series: [
                {
                    type: 'bar',
                    data
                }
            ]
        });
    }

    setTimeout(function () {
        run();
    }, 0);
    setInterval(function () {
        run();
    }, 3000);

    option && myChart.setOption(option);

</script>

</body>
</html>